﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div id="app">
        用户名：<input type="text"  v-model="searchConditions.uname"/>
        性别：<input type="text"  v-model="searchConditions.gender"/>
        <button v-on:click="search">搜索</button>
        <br />
        <br />

        <table border="1 solid" colspa="0" cellspacing="0">
            <tr>
                <td>用户ID</td>
                <td>用户名</td>
                <td>性别</td>
                <td>操作</td>
            </tr>
            <tr v-for="(user,index) in users">
                <td>{{user.id}}</td>
                <td>{{user.uname}}</td>
                <td>{{user.gender}}</td>
                <td>    
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>
        </table>
    </div>

    <!--导入axios的js文件-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="module">
        //导入vue模块
        import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';

        //船舰vue实例
        createApp({
            data() {
                return {
                    users: {},
                    searchConditions: {
                        uname: '',
                        gender:''
                    }
                }
            },
            //钩子mounted函数中获取全部数据
            mounted: function () {
                //发送异步请求
                axios.get('http://localhost:8887/user/queryUserList').then(rusult => {
                    //成功回调
                    //console.log(result.data);
                    this.users = result.data;
                }).catch(error => {
                    //失败回调
                    console.log(error);

                });
            },
            methods: {
                //声明方法
                search: function(){
                    //发送请求，完成搜索，携带搜索条件
                    axios.get('http://localhost:8887/user/queryUserByNameAndGender?uname=' + this.searchConditions.uname + "&gender=" + this.searchConditions.gender)
                        .then(result => {
                            this.users = result.data;
                        }).catch(error => {
                            console.log(error);
                        });
                }
            }

        }).mount('#app');//控制html元素
    </script>

</body>
</html>